<template>
	<view>
		<view class="top">
			<navigator url="/pages/index/index" open-type="switchTab">
				<image class="back" src="/static/images/白色左箭头.png" mode="" @click="goBack"></image>
			</navigator>
			<view class="title">车辆维修</view>
		</view>

		<view style="margin-top: -200rpx;">
			<uni-card>
				<map></map>

				<view class="carView">
					<!-- 左边部分 -->
					<view class="carItem1">
						<view>车百事汽车生活馆</view>
						<uni-rate :size="16" :value="4" :readonly="true" />
						<view>最高评分：4分</view>
						<view>营业时间：周一至周五 早上8:00-晚上22:00</view>
						<view>位置：山阳区人民路与解放路交叉口</view>
						<view>距离当前位置：556m</view>
					</view>
					<!-- 右边部分 -->
					<navigator url="/pages/zwj/mendianxiangqing/mendianxiangqing">
						<view class="carItem2">
							<view>
								<image src="../../../static/images/头像.jpg" mode=""></image>
							</view>
						</view>
					</navigator>
				</view>


				<!-- 联系门店 -->
				<view class="btnView">
					<view>
						<u-button type="primary" shape="circle" text="联系门店" icon="phone" @click="show=true">
						</u-button>
						<u-popup :show="show" @close="close" @open="open" round="15" mode="bottom">
							<view class="relaDoor">
								<view class="doorItem">18642589456</view>
								<view class="doorItem">复制</view>
								<view class="doorItem" @click="close">取消拨号</view>
							</view>
						</u-popup>
					</view>
					<navigator url="/pages/zwj/lijiyuyue/lijiyuyue">
						<u-button type="primary" color="#ff6128" shape="circle" text="立即预订" icon="plus"></u-button>
					</navigator>
				</view>
			</uni-card>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false

			}
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			goBack() {
			  uni.navigateBack();
			},

		}
	}
</script>

<style scoped>
	/* 背景图片 */
	.top {
		width: 100%;
		padding-bottom: 120px;
		background: url(../../../static/images/组 8.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.top .back {
		position: absolute;
		margin-left: 20px;
		margin-top: 30px;
		width: 15px;
		height: 15px;
		z-index: 2;
	}

	.top .title {
		text-align: center;
		font-size: 18px;
		color: #fff;
		line-height: 44px;
		/* 根据实际需要调整 */
		padding-top: 20px;
	}

	map {
		width: 610rpx;
		height: 800rpx;
	}

	.carView {
		margin-top: 35rpx;
		margin-bottom: 22rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.carItem1>view:nth-child(1) {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.carItem1>view:nth-child(3) {
		font-size: 22rpx;
		font-weight: bold;
	}

	.carItem1>view:nth-child(4) {
		font-size: 22rpx;
		font-weight: bold;
	}

	.carItem1>view:nth-child(5) {
		font-size: 22rpx;
		font-weight: bold;
	}

	.carItem1>view:nth-child(6) {
		font-size: 22rpx;
		color: royalblue;
		font-weight: bold;
	}

	/* 右边部分 */
	image {
		width: 200rpx;
		height: 150rpx;
	}

	.carItem2 {
		margin-top: 30rpx;
	}

	/* 联系门店 */
	.btnView {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.relaDoor {
		height: 300rpx;
		display: flex;
		flex-wrap: wrap;
		justify-items: center;
		align-items: center;
	}

	.doorItem {
		width: 700rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;

	}
</style>